<template>
    <div 
    :style="{width:width+'rem',height:height+'rem'}"
    >
        <span 
        v-if="number<=99"
        class="badge"
        :style="{fontSize:size+'rem',lineHeight:height+'rem'}"
        >
            {{number}}
        </span>
        <span 
        v-else
        class="badge"
        :style="{fontSize:size+'rem',lineHeight:height+'rem'}"
        >
            ···
        </span>
    </div>
</template>
<script>
export default {
  props: {
    number: {
      type: Number,
      required: true
    },
    width: {
      type: Number,
      default: 0.45
    },
    height: {
      type: Number,
      default: 0.45
    },
    size: {
      type: Number,
      default: 0.26
    }
  }
};
</script>

<style scoped>
.badge {
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  background: #ff4848;
  border-radius: 50%;
}
</style>

